<template>
  <div>
    <div class="drawerCenter">
      <div class="drawerUpload">
        <div class="drawerTitle">
          <i class="iconfont icon-xiazaimoban"></i>下载模板
        </div>
        <div class="drawerTips">
          为保证成功导入文件，请务必使用系统提供的导入模板
        </div>
        <el-button type="primary" plain @click="aDown"
          >模板下载
          <!-- <a href="" download="" class="mb_10">模板下载</a> -->
        </el-button>
      </div>

      <div class="drawerUpload">
        <div class="drawerTitle">
          <i class="iconfont icon-shangchuanwenjian"></i>上传文件
        </div>
        <div class="drawerTips">
          仅支持xlsx,xls文件,文件大小 <= 10M,单次只能上传一个文件
        </div>

        <el-upload
          class="upload-demo"
          :action="action"
          :multiple="multiple"
          :headers="headers"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
        >
          <i class="el-icon-upload wenjian"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
    </div>
    <!--   <div slot="footer" class="dialog-footer">
      <el-button type="primary">上 传</el-button>
    </div> -->
  </div>
</template>

<script>
export default {
  props: { num: { type: Number } },
  data() {
    return {
      orgPath: null, // 组织路径
      uploadData: {
        company_id: sessionStorage.getItem("companyId"),
      },
      multiple: true,
      action: "",
      action1: "/api/users/import", // 用户导入
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    };
  },

  methods: {
    // 本地文件下载
    aDown() {
      let host = localStorage.getItem("host");
      let link = document.createElement("a");
      link.setAttribute("href", host + "/api/index/example_template?type=1");
      link.setAttribute("download", `批量导入用户模板`);
      link.click();
    },

    handleAvatarSuccess() {
      this.$message({
        message: "恭喜您文件上传成功",
        type: "success",
      });
    },
    handleAvatarError() {
      this.$message.error("抱歉，文件上传失败");
    },
    loadData() {
      let type = this.num;
      if (type == 1) {
        this.action = this.action1;
      }
    },
  },
  created() {
    this.loadData();
  },
};
</script>


<style scoped lang="less">
.drawerCenter {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
}
.drawerUpload {
  &:last-child {
    margin-top: 100px;
  }

  .drawerTitle {
    font-size: 20px;
    font-weight: 600;
    color: #2b2b4c;
    margin-bottom: 15px;
  }

  .drawerTips {
    color: #a2a2a2;
    margin: 0 0 25px;
  }
}
.wenjian {
  font-size: 55px;
}
.upload-demo {
  border: 1px dashed rgb(241, 241, 241);
  padding: 40px 20px 60px 140px;
}
/deep/.el-upload__text {
  font-size: 14px;
  em {
    color: #409fee;
  }
}
.dialog-footer {
  margin: auto;
  padding-left: 250px;
  box-sizing: border-box;
}
</style>